<template>
  <div class="q-pa-md">
    <t-btn-dropdown
      align="left"
      :staticItems="staticItems"
      @dropdownItemClick="onItemClick"
      labelPosition="top"
      ref="ceshi"
      label="下拉按钮"
      label-text="下拉按钮"
      showModel=""
      maxWidth=""
      fixedWidth=""
      dropdownWidth="fixed"
      @before-hide="beforeHide"
      :hide-label="false"
      :popover="false"
      :split="true"
    >
    </t-btn-dropdown>
    <t-button @click="ceshi23">123</t-button>
  </div>
</template>

<script>
  import { onMounted, ref } from 'vue';
  export default {
    setup() {
      const staticItems = [
        {
          label:
            '选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1',
disabled:false,visible:true,
        },
        { label: '选项2', isDefaultBtn: true,disabled:false,visible:true, },
        { label: '选项3',disabled:false,visible:true, },
      ];
      const ceshi = ref();
      onMounted(() => {});

      return {
        ceshi,
        staticItems,
        onItemClick(item) {
          console.log(item);
        },
        beforeHide() {
          console.log(1);
        },
        ceshi23() {
          ceshi.value.setBtnDropVisibleByIndex(0, false)
          ceshi.value.setBtnDropVisibleByIndex(1, false)
          ceshi.value.setBtnDropVisibleByIndex(2, false)
          ceshi.value.setBtnDropVisibleByIndex(2,true)
        }
      };
    },
  };
</script>
